<template>
  <el-container>
    <el-container>
      <el-aside width="200px">
        <div class="xitong">leave managerment</div>
        <el-menu
          default-active="1-2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-date"></i>
              <span slot="title">Application</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="go_askforleave">ask for leave</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="1-2">leave managerment</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">Role</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="go_role">role managerment</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          
        </el-menu>
      </el-aside>

      <el-main>
        <el-header>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
          </el-menu>
          <div @click="exit">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </div>
          <p class="timedate">Current time：{{ nowTime }}</p>
        </el-header>

        <div class="echarts">
          <div class="box">
            <el-table :data="dataList" height="100%" stripe style="width: 35%">
              <el-table-column prop="leave_id" label="ID" width="120">
              </el-table-column>
              <el-table-column prop="reason" label="Name" width="140">
              </el-table-column>
              <el-table-column
                prop="begin_date"
                label="Begin date"
                width="300"
              ></el-table-column>
              <el-table-column
                prop="end_date"
                label="End date"
                width="300"
              >
              </el-table-column>
              <el-table-column prop="lastmodify" label="Last Modify"></el-table-column>
              <el-table-column prop="status" label="Approve Status">
                <template slot-scope="scope">
                  {{
                  scope.row.status == 0
                  ? "Unaudited"
                  : scope.row.status == 1
                  ? "Pending senior manager approve"
                  : scope.row.status == 2
                  ? "Approved"
                  : scope.row.status == -1
                  ? "Reject"
                  : "-"
              }}
                </template>
              </el-table-column>
              <el-table-column prop="create_time" label="Create">
              </el-table-column>
              <el-table-column prop="operation" label="Operation">
                <template slot-scope="scope">
              <div class="operatingBtn-list">
                <!-- <el-button type="text" @click="editBtn(scope.row.id)">编辑</el-button> -->
                
                
                <el-button v-if="scope.row.approveBtnVisable>0" type="primary" icon @click="goApproveMessageBox(scope.row.leave_id)">Approve<i class="el-icon-success el-icon--right"></i></el-button>
              </div>
            </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {
  getLeaveList, 
  goAddApprove,
  loginOut, 
} from "../axios/api";
export default {
  data() {
    return {
      activeIndex: "1",
      isCollapse: true,
      nowTime: "",
      dataList: [],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    go_askforleave(){
      this.$router.push("askforleave");
    },
    go_role() {
      this.$router.push("role");
    },
    getTime() {
      setInterval(() => {
        this.nowTime = new Date().toLocaleString();
      }, 1000);
    },
    paramsGetList(){
      let paramsData = {
        pageNumber: 1,
        pageSize: 10,
      };
      getLeaveList(paramsData).then((res) => {
        this.dataList = res.data.list;
        this.totalRows = res.data.total;
        console.log(res);
      });
    },
    goApproveMessageBox(id) {
        this.$confirm('Please choose your decision.', 'Approve', {
          confirmButtonText: 'Approve',
          cancelButtonText: 'Reject',
          type: 'warning'
        }).then(() => {
          let paramsData = {
            leave_id: id,
            approve_role: "",
            approve_status:1,
          };
        goAddApprove(paramsData).then((res)=>{
          if(res.stat>0){
            this.$message({
              type: 'success',
              message: 'Approve success!'
            });
            this.$router.go(0);
          }else{
            this.$message({
              type: 'warning',
              message: res.msg
            });
          }
        })
        
        }).catch(() => {
          let paramsData = {
            leave_id: id,
            approve_role: "",
            approve_status:-1,
          };
          goAddApprove(paramsData).then((res)=>{
          if(res.stat>0){
            this.$message({
              type: 'success',
              message: 'Reject success!'
            });
            this.$router.go(0);
          }else{
            this.$message({
              type: 'warning',
              message: res.msg
            });
          }
          })
     
        });
      },

    // 退出登录
    exit() {
      loginOut().then((res) => {
        console.log(res);
        if ((res.stat = 1)) {
          this.$router.push("/");
        }
      });
    },
  },
  mounted() {
    this.paramsGetList();
  },
  created() {
    this.getTime();
    
  },
  
};
</script>

<style>
.el-container {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0;
  bottom: 0;
}
.el-header {
  background-color: #b3c0d1;
  line-height: 60px;
  padding: 0;
  z-index: 1000;
}
.el-header .fr {
  float: right;
}

.el-header .el-menu {
  border-bottom: none;
}
.el-avatar {
  text-align: center;
  float: right;
  margin: 0.6rem 2rem 0.3rem 0;
}
.timedate {
  text-align: center;
  float: right;
  margin: 0 3rem 0.3rem 0;
}
.el-aside .el-menu {
  border-right: none;
}
.el-aside {
  background-color: white;
  line-height: 200px;
}
.xitong {
  height: 60px;
  text-align: center;
  line-height: 3;
  font-size: 20px;
  font-weight: bold;
}
.el-main {
  background-color: #e9eef3;
  line-height: 160px;
  padding: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.echarts {
  width: 100%;
  height: 90vh;
}
.box {
  width: 98%;
  height: 43vh;
  margin-top: 20px;
  background-color: white;
  border-radius: 5px;
  margin-left: 20px;
  display: flex;
}
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 80px;
  line-height: 80px;
}
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 54.5px;
  line-height: 54.5px;
}
.el-menu-item-group__title{
  padding: 0px;
}
</style>
